<template>
  <div>
    <!-- 基础列 -->
    <el-table-column
      v-if="showId"
      prop="id"
      label="ID"
      width="80"
      align="center"
    />
    
    <el-table-column
      v-if="showCreateTime"
      prop="create_time"
      label="创建时间"
      width="180"
      align="center"
    />

    <!-- 订单号列 -->
    <el-table-column
      v-if="orderNumberField && type !== 'order-qa'"
      :prop="orderNumberField"
      :label="orderNumberLabel"
      width="180"
      align="center"
    >
      <template slot-scope="{ row }">
        <div class="order-number-container">
          <span class="copy-text" @click="copyToClipboard(row[orderNumberField])">
            {{ row[orderNumberField] }}
          </span>
          <el-tag
            v-if="row.is_changecode"
            type="warning"
            size="mini"
            class="change-code-tag"
          >
            改码
          </el-tag>
        </div>
      </template>
    </el-table-column>

    <!-- 物流信息列 -->
    <el-table-column
      v-if="showShippingInfo && type !== 'order-qa'"
      label="物流信息"
      width="200"
      align="center"
    >
      <template slot-scope="{ row }">
        <div class="tracking-info">
          <span
            v-if="row.shipping_method"
            :class="['carrier-name', row.shipping_method.toLowerCase()]"
          >
            {{ getShippingMethodText(row.shipping_method) }}
          </span>
          <span
            v-if="row.tracking_number"
            class="tracking-number"
            @click="copyToClipboard(row.tracking_number)"
          >
            {{ row.tracking_number }}
          </span>
        </div>
      </template>
    </el-table-column>

    <!-- 地址信息列 -->
    <el-table-column
      v-if="showAddress && type !== 'order-qa'"
      label="地址信息"
      min-width="300"
      show-overflow-tooltip
    >
      <template slot-scope="{ row }">
        <div>
          <div v-if="row.company_name" class="address-item">
            <strong>公司：</strong>{{ row.company_name }}
          </div>
          <div v-if="row.attention" class="address-item">
            <strong>收件人：</strong>{{ row.attention }}
          </div>
          <div v-if="row.address1" class="address-item">
            <strong>地址1：</strong>{{ row.address1 }}
          </div>
          <div v-if="row.address2" class="address-item">
            <strong>地址2：</strong>{{ row.address2 }}
          </div>
          <div v-if="row.city || row.state" class="address-item">
            <strong>城市/州：</strong>{{ row.city }} {{ row.state }}
          </div>
          <div v-if="row.postal_code" class="address-item">
            <strong>邮编：</strong>{{ row.postal_code }}
          </div>
        </div>
      </template>
    </el-table-column>

    <!-- 包裹信息列 -->
    <el-table-column
      v-if="showPackageInfo && type !== 'order-qa'"
      label="包裹信息"
      width="200"
      align="center"
    >
      <template slot-scope="{ row }">
        <div>
          <div v-if="row.weight">重量: {{ row.weight }}kg</div>
          <div v-if="row.length && row.width && row.height">
            尺寸: {{ row.length }}×{{ row.width }}×{{ row.height }}cm
          </div>
          <div v-if="row.box_count">箱数: {{ row.box_count }}</div>
        </div>
      </template>
    </el-table-column>

    <!-- 备注列 -->
    <el-table-column
      v-if="showRemark && type !== 'order-qa'"
      prop="remark"
      label="备注"
      width="200"
      show-overflow-tooltip
    />

    <!-- 自定义列插槽 -->
    <!-- 订单问答专用列 -->
    <el-table-column
      v-if="type === 'order-qa'"
      prop="question_no"
      label="提问单号"
      min-width="150"
      align="center"
    >
      <template slot-scope="{ row }">
        <span class="copy-text" @click="copyToClipboard(row.question_no)">
          {{ row.question_no }}
        </span>
      </template>
    </el-table-column>
    
    <el-table-column
      v-if="type === 'order-qa'"
      prop="time_slot_display"
      label="时间段"
      min-width="120"
      align="center"
    />
    
    <el-table-column
      v-if="type === 'order-qa'"
      prop="customer_info"
      label="订单信息"
      min-width="200"
      align="center"
      show-overflow-tooltip
    />
    
    <el-table-column
      v-if="type === 'order-qa'"
      prop="question_summary"
      label="问答概要"
      min-width="250"
      align="center"
      show-overflow-tooltip
    />
    
    <el-table-column
      v-if="type === 'order-qa'"
      prop="sales_person"
      label="销售"
      min-width="150"
      align="center"
    />
    
    
    <el-table-column
      v-if="type === 'order-qa'"
      prop="created_by_username"
      label="创建人"
      min-width="100"
      align="center"
    />

    <slot name="custom-columns"></slot>

    <!-- 操作列 -->
    <el-table-column
      v-if="showActions"
      label="操作"
      width="100"
      align="center"
      class-name="small-padding fixed-width"
      fixed="right"
    >
      <template slot-scope="{ row }">
        <div class="action-buttons">
          <el-button
            v-if="showEdit"
            size="mini"
            type="primary"
            @click="handleEdit(row)"
          >
            编辑
          </el-button>
          <el-button
            v-if="showDelete"
            size="mini"
            type="danger"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
          <slot name="custom-actions" :row="row"></slot>
        </div>
      </template>
    </el-table-column>
  </div>
</template>

<script>
export default {
  name: 'ShippingTableColumns',
  props: {
    type: { type: String, default: '' },
    showId: { type: Boolean, default: false },
    showCreateTime: { type: Boolean, default: true },
    orderNumberField: { type: String, default: '' },
    orderNumberLabel: { type: String, default: '订单号' },
    showShippingInfo: { type: Boolean, default: true },
    showAddress: { type: Boolean, default: true },
    showPackageInfo: { type: Boolean, default: true },
    showRemark: { type: Boolean, default: true },
    showActions: { type: Boolean, default: true },
    showEdit: { type: Boolean, default: true },
    showDelete: { type: Boolean, default: true }
  },
  methods: {
    copyToClipboard(text) {
      if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(() => {
          this.$message.success('已复制到剪贴板')
        })
      } else {
        const textArea = document.createElement('textarea')
        textArea.value = text
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        this.$message.success('已复制到剪贴板')
      }
    },
    getShippingMethodText(method) {
      const methods = {
        'YAMATO': '黑猫',
        'SAGAWA': '佐川'
      }
      return methods[method] || method
    },
    handleEdit(row) {
      this.$emit('edit', row)
    },
    handleDelete(row) {
      this.$emit('delete', row)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/shipping-common.scss';

.address-item {
  margin-bottom: 4px;
  font-size: 12px;
}
</style>
